﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>VueTetris</title>
    <meta charset="utf-8">
	<script src="lib/vue.js"></script>
	<script src="lib/jquery.js"></script>
	<style>
		#container td{
			width:20px;
			height:20px;
			padding:0;
			margin:0;
		}
		td.active{
			background-color:red;
		}
		td.background{
			background-color:green;
		}
		td.default{
			background-color:lightgray;
		}
		div#container table{
			border:2px solid black;
			margin:5px;
		}
	</style>
</head>
<body>

<div id="container">
	<div>分数：{{dieRows*100}}</div>
	<div>游戏状态：{{getGameState}}</div>
	<div>翻转(↑) 下落(↓) 左移(←) 右移(→) 暂停/取消暂停(P) 开始(R)</div>
	<table>
		<tr v-for="y in 4">
			<td v-for="x in 4" v-bind:class="getNextActiveClass(x,y)"></td>
		</tr>
	</table>
	
	<table>
		<tr v-for="row in background">
			<td v-for="cell in row" v-bind:class="getCellClass(cell)"></td>
		</tr>
	</table>
</div>

<script src="js/vuetetris.js"></script>

</body>
</html>